<template>
	<view class="message">
		<!-- #ifdef MP-WEIXIN -->
		<view class="ask-list-tips" v-if="appid==='wx9528157f77bff5d2'">
			{{checked?'已开启接收系统消息通知':'点击开启接收系统消息通知'}}
			<u-switch v-model="checked" :loading="loading" :disabled="checked?true:false" active-color="#1eb500"></u-switch>
		</view>
		<!-- #endif -->
		<view class="message-list">
			<view class="message-item" v-for="(item,index) in noticeList" :key="index" @click="GoMessageDetails(item.id)">
				<view class="image-view">
					<image :src="item.image" mode="aspectFill"></image>
					<text class="count" v-if="item.count !=0">{{item.count}}</text>
				</view>
				<view class="message-info">
					<view class="header-view">
						<text class="name">{{item.name}}</text>
						<text class="add-time">{{item.add_time}}</text>
					</view>
					<text class="content">{{item.content}}</text>
				</view>
			</view>
		</view>
		<uni-popup type="center" ref="templeteMessage" :maskClick="false">
			<view class="templeteMessage-box">
				<view class="templeteMessage-box-close"><u-icon name="close" size="40" @click="closeTempleteMessage"></u-icon></view>
				<image :lazy-load="true" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/proInfo/tips.png?v=2"></image>
				<view class="templeteMessage-tit">打开咨询回复提醒</view>
				<view class="templeteMessage-subtit">开启提醒，第一时间了解详情</view>
				<view class="templeteMessage-btn" @click="TemplateMessage">马上开启</view>
			</view>
		</uni-popup>
		<pt-openSetting
			ref="openSetting" 
			tips="您已关闭订阅消息主开关，请打开主开关后重新开启消息回复推送"
			@closeOpenSetting="closeOpenSetting">
		</pt-openSetting>
		<pt-loading></pt-loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				noticeList: [],
				appid: '',
				checked: false,
				loading: false,
				controlStatus: false,
			};
		},
		onShow() {
			this.init()
			// #ifdef MP-WEIXIN
			this.getWXAuth(1)
			this.appid = uni.getExtConfigSync().appid
			// #endif
		},
		watch: {
			checked(val) {
				if (val == true) {
					if(this.controlStatus == true) {
						this.controlStatus = false;
						return ;
					}
					this.checked = true;
					this.loading = true;
					this.openMessagePop();
				}
			}
		},
		methods: {
			openMessagePop(){
				uni.getSetting({
					withSubscriptions: true,
					success: (success) => {
						if(!success.subscriptionsSetting.mainSwitch){
							this.loading = false
							this.checked = false
							this.$refs.openSetting.init()
						}else{
							this.$refs.templeteMessage.open()
						}
					}
				})
			},
			closeOpenSetting(){
				this.checked = false
				this.loading = false
			},
			getWXAuth(type){
				uni.getSetting({
					withSubscriptions: true,
					success: (res) => {
						if(type){
							if(res.subscriptionsSetting.itemSettings){
								if(res.subscriptionsSetting.itemSettings['2vjYDyzIq7lhgC-5LCIprDf0sBRtEX-PfTvUXgJfml0'] && res.subscriptionsSetting.itemSettings['2vjYDyzIq7lhgC-5LCIprDf0sBRtEX-PfTvUXgJfml0']==='accept'){
									this.checked = true;
									this.controlStatus = true;
								}
							}
							return
						}
						if(res.subscriptionsSetting.itemSettings){
							if(res.subscriptionsSetting.itemSettings['2vjYDyzIq7lhgC-5LCIprDf0sBRtEX-PfTvUXgJfml0']){
								this.checked = true;
								uni.showToast({
									icon: 'none',
									title: '已开启优惠券到账/过期提醒,可以在“我的>优惠券”中查看',
									duration: 1500
								})
							}else{
								this.checked = false;
								uni.showToast({
									icon: 'none',
									title: '您未选择“总是保持以上选择，不再询问”，推送仅一次有效',
									duration: 1500
								})
							}
						}else{
							this.checked = false;
							uni.showToast({
								icon: 'none',
								title: '您未选择“总是保持以上选择，不再询问”，推送仅一次有效',
								duration: 1500
							})
						}
					}
				})
			},
			init() {
				this.$u.apiWei.NoticeList().then(res => {
					this.noticeList = res.datas
				})
			},
			GoMessageDetails(id){
				uni.navigateTo({
					animationDuration: 500,
					url: '/my/my-message/message-details/message-details?id=' + id
				})
			},
			TemplateMessage() {
				uni.requestSubscribeMessage({
					tmplIds: [
						'2vjYDyzIq7lhgC-5LCIprDf0sBRtEX-PfTvUXgJfml0'
					],
					complete: (e) => {
						if(e.errCode==20004){
							this.$refs.openSetting.open()
							return false
						}
						let name = e['2vjYDyzIq7lhgC-5LCIprDf0sBRtEX-PfTvUXgJfml0']
						switch (name){
							case 'accept':
								this.getWXAuth()
								this.loading = false;
								this.$refs.templeteMessage.close()
								break;
							case 'reject':
								uni.showToast({
									icon: 'none',
									title: '您已拒绝接收通知，将不会收到消回复通知'
								})
								this.checked = false;
								this.loading = false;
								this.$refs.templeteMessage.close()
								break;
						}
					}
				})
			},
			closeTempleteMessage(){
				this.$refs.templeteMessage.close()
				this.checked = false
				this.loading = false
			},
		},
		onPullDownRefresh() {
			this.init()
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		}
	}
</script>

<style lang="scss">
	.message {
		padding-top: 20rpx;
		background-color: #F9F9F9FF;
		.ask-list-tips{
			padding: 30rpx 30rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #FFF;
		}
		.message-list {
			padding: 30rpx;
			background-color: #fff;

			.message-item {
				padding: 30rpx 0;
				display: flex;
				border-bottom: 2rpx solid #F5F5F5;

				.image-view {
					position: relative;
					width: 90rpx;
					height: 90rpx;

					image {
						width: 100%;
						height: 100%;
					}

					.count {
						display: block;
						position: absolute;
						top: 0;
						right: -10rpx;
						font-size: 20rpx;
						font-weight: bold;
						color: #FFFFFF;
						width: 40rpx;
						line-height: 28rpx;
						text-align: center;
						background: #EE5D56;
						border: 3rpx solid #FFFFFF;
						border-radius: 14rpx;

					}
				}

				.message-info {
					padding-left: 30rpx;
					flex: 1;

					text {
						display: block;
					}

					.header-view {
						display: flex;

						.name {
							flex: 1;
							font-size: 32rpx;
							font-weight: bold;
							color: #28221F;
							line-height: 48rpx;
						}

						.add-time {
							flex: 1;
							font-size: 20rpx;
							font-weight: 500;
							color: #909090;
							text-align: right;
							line-height: 48rpx;
						}
					}

					.content {
						font-size: 24rpx;
						font-weight: 500;
						color: #757575;
						line-height: 48rpx;
					}
				}
			}
		}
		.templeteMessage-box{
			width: 600rpx;
			padding: 40rpx;
			background-color: #FFF;
			border-radius: 10rpx;
			text-align: center;
			.templeteMessage-box-close{
				text-align: right;
				color: #999;
				margin-bottom: 25rpx;
			}
			.templeteMessage-tit{
				padding: 50rpx 0 30rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #141414;
			}
			.templeteMessage-subtit{
				color: #909090;
				font-size: 24rpx;
			}
			image{
				display: inline-block;
				width: 350rpx;
				height: 323rpx;
				border-radius: 10rpx;
			}
			.templeteMessage-btn{
				border-radius: 8rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				background-color: #141414;
				color: #FFF;
				font-size: 28rpx;
				margin-top: 80rpx;
			}
		}
	}
</style>
